<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding:0;
            margin:0;
        }
        .box{
            width: 300px;
            height: 500px;
            text-align:center;
            overflow:hidden;
            border:1px solid #ac5b58;
            margin:50px auto;
            position:relative;
        }
        .content{
            padding:10px;
        }
        .scroll {
            width: 20px;
            height: 520px;
            background-color: #d5eadf;
            position:absolute;
            top:0;
            right:0;
        }
        .bar{
            width: 20px;
            height: 200px;
            background-color: #ff8607;
            border-radius:10px;
            cursor:pointer;
            position:absolute;
            top:0;
        }
    </style>
</head>
<body>
    <div class="box" id="box">
        <div class="content">
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            孩儿励志出湘关，学不成名终不还。<br>
            埋骨何须桑新地，人生无处不青山。<br>
            ----------------------毛泽东<br>
        </div>
        <div class="scroll">
            <div class="bar"></div>
        </div>
    </div>
<script>
    function scroll(){
        return{
            "top":window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop,
            "left":window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft
        };

    }


    //模拟滚动条，鼠标拖动滚动条，内容等比例联动（鼠标按下加移动）
    var box=document.getElementById("box");
    var content=box.children[0];
    var scroll=box.children[1];
    var bar=scroll.children[0];
    //确定bar的高（内容的高/盒子的高=scroll的高/bar的高）
    var barHeight=box.offsetHeight*scroll.offsetHeight/content.offsetHeight;
    bar.style.height=barHeight+"px";
    bar.onmousedown=function(ev){
        ev=ev||event;
        var yy=ev.pageY||scroll().top+ev.clientY-box.offsetTop;
        document.onmousemove=function(ev){
            ev=ev||event;
            var pagey=ev.pageY||scroll().top+ev.clientY;
            pagey=pagey-yy;
            if(pagey<0){
                pagey=0;
            }
            if(pagey>scroll.offsetHeight-bar.offsetHeight){
                pagey=scroll.offsetHeight-bar.offsetHeight;
            }
            bar.style.top=pagey+"px";
            //内容走的距离/bar走的距离=（内容的高-大盒子的高）/（scroll的高-bar的高）
            var s=pagey*(content.offsetHeight-box.offsetHeight)/(scroll.offsetHeight-bar.offsetHeight);
            content.style.marginTop=-s+"px";
            windwo.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
        }
    }
   document.onmouseup=function(){
        document.onmousemove=null;
    }
</script>
</body>
</html>